HTML 데이터 속성

❓질문

HTML 데이터 속성은 무엇인가요?


💡 조사하기전 내가 알고 있던 내용

데이터 속성이란 해당하는 태그에 data-@ 속성을 이용하여 데이터를 주입할 수 있는 방법이다 이 데이터는 CSS의 속성 선택자나 JS의 dataset객체를 이용하여 가져 올 수 있습니다.

어떨때 이용하냐면 특정 HTML 요소에 데이터 속성에 필요한 데이터를 바인딩 해놓고 자바스크립트 로직이나 CSS상에서 해당 데이터를 활용 할 수 있습니다. 이는 상호작용하는 이벤트를 쉽게 구현할 수 있게 해줍니다

단 데이터 속성은 data-id-name 이런식이면 dataset.idName 이렇게 카멜 케이스로 치환되기도하고 DOM이 무거워지니 간단하게 구현할 파트가아니면 그냥 다른데 저장하는걸 추천한다.


🏫 정리한 내용

HTML data-* 속성